<template>
  <div class="home_map_layerMap">
    <div class="wrapper-title">
      <BaseTitle title="各个图层" />
    </div>

    <div class="wrapper-content">
      <div class="tabs">
        <Tabs v-model="tabValue" @on-click="tabClick">
          <TabPane
            v-for="item in apis.tabArr"
            :key="item.name"
            :label="item.label"
            :name="item.name"></TabPane>
        </Tabs>
      </div>
      <div class="views">
        <transition name="fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import * as apis from './api/layerMap'
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'routeInfo'
    ])
  },
  created () {
    this.apis = apis
    this.tabClick(this.routeInfo.name)
  },
  data () {
    return {
      tabValue: ''
    }
  },
  methods: {
    tabClick (val) {
      this.tabValue = val
      this.$router.push({ name: val })
    }
  }
}
</script>

<style lang="scss" scoped>
  .home_map_layerMap {
    width: 100%;
    height: 100%;
    padding: 10px;
    overflow: auto;
    .tabs {
      height: 40px;
      position: absolute;
      top: 40px;
      left: 10px;
      right: 10px;
    }
    .views {
      position: absolute;
      top: 80px;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 10px;
      padding-top: 0;
      overflow: hidden;
    }
  }
</style>
